<!-- EquipmentInfoManagement.vue -->
<template>
    <div>
      <el-card>
        <!-- 筛选区域 -->
        <el-row :gutter="20" type="flex" justify="start" align="middle">
          <el-col :span="10">
            <el-date-picker
                v-model="timeFrame"
                type="datetimerange"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                format="YYYY-MM-DD HH:mm:ss"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
            />
          </el-col>
          <el-col :span="5">
            <el-button id="filter-button" type="primary" @click="filterData">筛选</el-button>
            <el-button id="reset-button" type="default" @click="resetFilter">重置</el-button>
          </el-col>
        </el-row>
        <!-- 列表区 -->
        <div style="height: 60vh">
          <el-skeleton :loading="loading" animated>
            <el-table :data="paginatedData" border height="100%" style="width: 100%; margin-top:20px">
              <el-table-column prop="dataSeq" label="诊断序号" />
              <el-table-column prop="triggerTime" label="触发时间" />
              <el-table-column prop="warContent" label="监测内容" />
              <el-table-column prop="diagnosisResult" label="诊断结果" />
              <el-table-column prop="comments" label="备注" />
            </el-table>
          </el-skeleton>
        </div>
        <!-- 分页 -->
        <template #footer>
          <div style="margin-top: -30px">
            <Pagination
                :total="total"
                :current-page.sync="searchForm.current"
                :total-pages="totalPages"
                @update:currentPage="handlePageChange"
            />
          </div>
        </template>
      </el-card>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        timeFrame: [],
        loading: false,
        paginatedData: [],
        total: 0,
        searchForm: {
          current: 1,
        },
        totalPages: 0,
      };
    },
    methods: {
      filterData() {
        // 实现筛选逻辑
      },
      resetFilter() {
        // 重置筛选条件
      },
      handlePageChange(page) {
        // 处理分页逻辑
      },
    },
  };
  </script>
  